<template>
	<view>
		<view class="tabs-box">
			<text :class="active == 0 ? 'active' : ''" @click="active = 0">{{$t('trade.commission1')}}</text>
			<!-- <text :class="active == 1 ? 'active' : ''" @click="active = 1">{{$t('trade.commission2')}}</text> -->
			<text :class="active == 2 ? 'active' : ''" @click="active = 2">{{$t('trade.commission3')}}</text>
		</view>
		
		<z-paging ref="paging" v-model="dataList" @query="queryList" :use-page-scroll="true">
			<view class="order-item"  v-for="(item,index) in dataList">
				<template v-if="active == 0 || active == 1">
					<view class="order-title-box">
						{{item.pairsName}}
						<view class="btn-box" v-if="active == 0" @click="cancalOrderFn(item)">
							{{$t('trade.cancelOrder')}}
						</view>
						<view class="btn-box" v-if="active == 1">
							{{$t('trade.deal')}}
						</view>
					</view>
					<view class="tags">
						<text class="buy" :style="{'color': item.entrustType == 'buy'?'#69DF9C':'#c3426d'}">{{$t('trade.priceLimit')}}</text>
						<text class="buy" :style="{'color': item.entrustType == 'buy'?'#69DF9C':'#c3426d'}">{{item.entrustType == 'buy'?$t('trade.buy'):$t('trade.sell')}}</text>
						{{timeFormat(item.createTime,'mm/dd hh:MM')}}
					</view>
					
					<view class="table-box">
						<view class="table-tr">
							<text>{{$t('trade.commissionNum1')}}</text>
							<!-- <text>{{$t('trade.commissionNum2')}}</text> -->
							<text>{{$t('trade.deal2')}}</text>
							<text>{{$t('trade.commissionNum3')}}</text>
						</view>
						<view class="table-td">
							<text>{{item.num}}</text>
							<!-- <text>{{item.num}}</text> -->
							<text>{{item.surplusNum}}</text>
							<text>{{item.price}}</text>
						</view>
					</view>
				</template>
				<template v-if="active == 2">
					<view class="order-title-box">
						USDC/WNA
						<view class="btn-box">
							<!-- {{$t('trade.cancelOrder')}} -->
						</view>
					</view>
					<view class="tags">
						<text class="buy">{{$t('trade.priceLimit')}}</text>
						<text class="buy">{{$t('trade.buy')}}</text>
						{{timeFormat(item.createTime,'mm/dd hh:MM')}}
					</view>
					
					<view class="table-box">
						<view class="table-tr">
							<text>{{$t('trade.deal1')}}</text>
							<text>{{$t('trade.deal21')}}</text>
							<text>{{$t('trade.deal3')}}</text>
						</view>
						<view class="table-td">
							<text>{{item.tradeAmount}}</text>
							<text>{{item.tradeNum}}</text>
							<text>{{item.tradePrice}}</text>
						</view>
					</view>
				</template>
				
			</view>
		</z-paging>

		<view class="bottom-box"></view>
	</view>
</template>

<script setup>
	import { timeFormat } from '@/uni_modules/uview-plus';
	import { onLoad } from '@dcloudio/uni-app'
	import { ref,watch } from 'vue';
	import { getQueryOrder,queryHistoryOrder,getQueryTrade,cancalOrder } from '@/common/api/common.js'
	import { useI18n } from 'vue-i18n';
	const {t} = useI18n();
	
	const active = ref(0)
	const paging = ref(null)
	const dataList = ref([])
	
	watch(active, (newValue, oldValue) => {
	  paging.value.reload();
	});
	
	const queryList = (pageNo, pageSize) => {
		let params = {
			page: pageNo - 1,
			pageSize: pageSize
		}
		if(active.value == 0) {
			params.state = 'create'
			params.type = ''
			getQueryOrder(params).then(res => {
				if(res.status == 0) {
					paging.value.complete(res.result.content);
				}else {
					paging.value.complete(false);
				}
			})
		}else if(active.value == 1) {
			queryHistoryOrder(params).then(res => {
				if(res.status == 0) {
					paging.value.complete(res.result.content);
				}else {
					paging.value.complete(false);
				}
			})
		}else if(active.value == 2) {
			getQueryTrade(params).then(res => {
				if(res.status == 0) {
					paging.value.complete(res.result.content);
				}else {
					paging.value.complete(false);
				}
			})
		}
	}
	
	const cancalOrderFn = (async(item) => {
		uni.showModal({
			title: '提示',
			content: '确认要进行撤单吗？',
			success: function (res) {
				if (res.confirm) {
					// console.log('用户点击确定');
					cancalOrder({orderId: item.id}).then(data => {
						if(data.status == 0){
							uni.$u.toast(t("success"))
							paging.value.reload();
						}
					})
				} else if (res.cancel) {
					// console.log('用户点击取消');
				}
			}
		});
	})

	onLoad(() => {

	})
</script>

<style lang="scss" scoped>
	
	.tabs-box {
		width: calc(100vw - 80rpx);
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text {
			color: #1f1f1f80;
		}
	
		.active {
			color: #1f1f1f;
			font-weight: 600;
		}
	}
	
	.order-item{
		width: calc(100% - 80rpx);
		margin: 40rpx auto 0;
		background: #f5f5f5;
		border-radius: 16rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		
		.order-title-box{
			font-weight: 500;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.btn-box {
				font-weight: 450;
				border-radius: 30rpx;
				color: #FF9C00;
			}
		}
		.tags{
			margin: 10rpx 0 0;
			color: #1F1F1F80;
			font-size:20rpx;
			text{
				padding: 3rpx 10rpx;
				border-radius: 20rpx;
				background: #f8e9ec;
				color: #c3426d;
				margin-right: 10rpx;
			}
			text.buy{
				background: #EDEDED;
				color: #69DF9C;
			}
			text.sell-out{
				background: #EDEDED;
				color: #FF3E3E;
			}
		}
		
		.table-box{
			margin-top: 20rpx;
			font-size: 26rpx;
			.table-tr{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0;
				color: #1F1F1F80;
				text-align: left;
				text{
					width: 33.33%;
					display: block;
				}
				text:last-child{
					text-align: right;
				}
			}
			.table-td{
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: left;
				text{
					width: 33.33%;
					display: block;
				}
				text:last-child{
					text-align: right;
				}
			}
		}
	}
</style>